<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .box {
      width: 450px;

      margin: 50px;
      display: flex;
      flex-direction: column;

      position: relative;
    }

    .box>.show {
      width: 450px;
      height: 450px;
      border: 1px solid #333;
      position: relative;
    }

    .box>.show>.mask {
      width: 200px;
      height: 200px;
      background-color: yellow;
      opacity: .4;
      position: absolute;
      top: 0px;
      left: 0px;

      display: none;
    }

    .box>.list {
      width: 100%;
      flex: 1;

      display: flex;
      justify-content: flex-start;
      align-items: center;

      box-sizing: border-box;
      padding: 20px;
    }

    .box>.list>p {
      width: 54px;
      height: 54px;
      border: 1px solid #333;
      margin-right: 10px;
    }

    .box>.list>p.active {
      border-color: red;
    }

    .box>.enlarge {
      width: 400px;
      height: 400px;

      position: absolute;
      top: 0;
      left: 101%;

      background: url(../images/1.big.jpg) no-repeat;
      background-size: 800px 800px;
      background-position: 0 0;

      display: none;
    }
  </style>
</head>

<body>

  <div class="box">
    <div class="show">
      <img src="../images/1.jpg" alt="">
      <div class="mask"></div>
    </div>
    <div class="list">
      <p class="active">
        <img src="../images/1.small.jpg" showImg="../images/1.jpg" enlargeImg="../images/1.big.jpg" alt="">
      </p>
      <p>
        <img src="../images/2.small.jpg" showImg="../images/2.jpg" enlargeImg="../images/2.big.jpg" alt="">
      </p>
    </div>
    <div class="enlarge"></div>
  </div>
  <script>
    /* 
    分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
             2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
             3、放大图也要按照左边比例来移动
             4、鼠标移到小图上可以切换图片
     */


    // 获取show 的元素
    var showEle = document.querySelector(".show");
    // 获取遮罩层
    var maskEle = document.querySelector(".mask");
    // 获取放大区域
    var enlargeEle = document.querySelector(".enlarge");

    // 获取box元素
    var boxEle = document.querySelector(".box");
    showEle.onmouseenter = function () {
      maskEle.style.display = "block";
      enlargeEle.style.display = "block";
    }


    showEle.onmouseleave = function () {
      console.log(111);
      maskEle.style.display = "none";
      enlargeEle.style.display = "none";
    }


    // 遮罩层跟随鼠标移动；

    showEle.onmousemove = function (e) {
      // var x = e.offsetX;  //相对于元素自身的偏移量；
      // var y = e.offsetY;  
      // console.log(this.offsetLeft);

      var x = e.clientX - boxEle.offsetLeft - maskEle.offsetWidth / 2;
      var y = e.clientY - boxEle.offsetTop - maskEle.offsetHeight / 2;

      // 边界判断；
      // 左边判断
      if (x < 0) {
        x = 0;
      }
      // 右边判断
      if (x > this.offsetWidth - maskEle.offsetWidth) {
        x = this.offsetWidth - maskEle.offsetWidth
      }

      // 上边边界

      if (y < 0) {
        y = 0;
      }

      // 下边边界
      if (y > this.offsetHeight - maskEle.offsetHeight) {
        y = this.offsetHeight - maskEle.offsetHeight
      }

      // 获取enlarge的背景图的宽和高；

      var bgSize = getComputedStyle(enlargeEle, null)['background-size'];
      console.log(bgSize)
      var arr = bgSize.split(" ");
      var wNum = parseInt(arr[0]);  //背景图的宽
      var hNum = parseInt(arr[1]); //背景图的高；

      // 获取x距离
      var xx = (maskEle.offsetLeft / this.offsetWidth) * wNum;
      var yy = (maskEle.offsetTop / this.offsetHeight) * hNum;
      console.log(xx, yy);
      enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
      // console.log(x,y);
      maskEle.style.left = x + "px";
      maskEle.style.top = y + "px";
    }



    // 点击小图切换 对应的图像
    var psEle = document.querySelectorAll(".list p");
    var imgEle = document.querySelector(".show img");
    psEle.forEach((item,key)=>{
        item.onclick = function(){
          psEle.forEach((item,k)=>{
            if(k==key){
              item.classList.add("active");
            }else{
              item.classList.remove("active");
            }
          });
          // console.log(key);
          // 替换上面的图像；
          imgEle.src = `../images/${key+1}.jpg`;
          // 切换右边的大图；
          enlargeEle.style.backgroundImage = `url(../images/${key+1}.big.jpg)`;
        }
    })


  </script>


</body>

</html>